<template>
  <li class="msg-wrapper">
    <div class="right-msg">
      <div class="content-box" data-name="花里花哨">
        这是超长的asdasdawdawda大萨达大萨达阿萨德as阿萨德阿废弃物爱吃啊我的阿达是发生大沙发上
      </div>
      <el-avatar
        class="avatar"
        shape="square"
        size="medium"
        :src="$utils.getAvatar('avatar.png')"
      ></el-avatar>
    </div>
  </li>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class RightMsg extends Vue {
}
</script>

<style lang="scss" scoped>
.msg-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.right-msg {
  width: 63%;
  .avatar {
    width: 36px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
  }
  .content-box {
    vertical-align: top;
    width: calc(100% - 51px);
    user-select: text;
    display: inline-block;
    margin-right: 15px;
    background-color: #A9E87A;
    border-radius: 4px;
    padding: 10px 8px;
    line-height: 1.5;
    min-height: 35px;
    position: relative;
    top: 0;
    font-family: Arial, Helvetica, sans-serif;
    &::before {
      content: '';
      width: 0;
      height: 0;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent #A9E87A;
      position: absolute;
      right: -10px;
      top: 15px;
      z-index: 2;
    }
  }
}
</style>
